@import "reset.less";

.home {
  .menu-list {
    position: fixed;
    z-index: 99;
    height: 100%;
  }
  .wider {
    width: 289px;
  }
  .narrow {
    width: 64px;
  }
  .el-menu-vertical-demo {
    overflow: auto;
    height: 100%;
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .home__right {
    margin-left: 290px;
    transition: margin-left 0.3s;

    &.menu-unfold {
      margin-left: @range-larger;
    }

    .silder-nav {
      height: 50px;
      .main-header {
        position: fixed;
        z-index: 100;
        width: 100%;
        height: 50px;
        line-height: 50px;
        background-color: #fff;
        border-bottom: 1px solid #eee;
        padding-left: 10px;
        padding-right: @range-larger;
        .flex-start;

        &__button {
          padding: 4px @range-mini;
        }
        .breadcrumb {
          display: inline-block;
          margin-left: 20px;
        }
      }
    }

    .user-info {
      position: fixed;
      top: 0;
      right: 0;
      width: 100px;
      z-index: 100;
      & > div {
        cursor: pointer;
        height: 50px;
        .flex-center;
      }
      &-name {
        i {
          margin-left: 6px;
        }
      }
      &-logout {
        border: 1px solid #eee;
        border-top: none;
        background: #f56c6c;
        color: #fff;
        font-size: 20px;
        font-family: '楷体';
        &:hover {
          background-color:rgba(245, 108, 108, 0.8);
        }
      }
      &-edit {
        border: 1px solid #eee;
        border-top: none;
        background: #409eff;
        color: #fff;
        font-size: 20px;
        font-family: '楷体';
        &:hover {
          background-color:rgba(64, 158, 255, 0.8);
        }
      }
      &__drawer {
        padding: 40px;
        &-button {
          margin-top: 30px;
          text-align: center;
        }
        .el-input__inner {
          padding: 0 8px;
          border: 1px solid #BEBEBE;
        }
      }
    }

    &-col {
      width: 990px;
      min-height: 1404px;
      padding: 120px;
      margin: 0 auto;
      border: 1px solid #000;
    }
    &-row {
      width: 1404px;
      min-height: 990px;
      padding: 120px;
      margin: 0 auto;
      border: 1px solid #000;
    }
  }
  // 返回顶部按钮
  &__back-top-button {
    background: #f4f4f5;
    border-color: #d3d4d6;
  }
  // 提交 按钮
  &__commit-button {
    position: fixed!important;
    z-index: 100;
    right: @range-normal;
    bottom: 120px;
  }
  // 保存 按钮
  &__save-button {
    position: fixed!important;
    z-index: 100;
    right: @range-normal;
    bottom: 72px;
  }
  // 填表说明 按钮
  &__explain-button {
    position: fixed!important;
    z-index: 100;
    right: @range-normal;
    bottom: @range-normal;
  }
  // 填表说明 弹窗
  &__explain {
    margin-top: -50px;
    z-index: 0;
    &::-webkit-scrollbar {
      display: none;
    }
    &-title {
      font-family: @font-family-black;
      font-size: @font-size-two-small;
    }
    &-content {
      width: 100%;
      height: 100%;
      overflow: auto;
      color: #000;
      margin-top: -20px;
    }
    &-sure {
      padding: @range-minier @range-normal;
      border-radius: 12px;
      font-size: @font-size-four-small;
      font-family: @font-family-black;
    }
  }
  // 遮罩层
  .goast {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // background-color: rgba(0, 0, 0, 0.4);
  }

  // 修改 elementUI 默认样式
  // select
  .el-select {
    display: block;
  }
  // input
  .el-input__inner {
    border: none;
    width: 100%;
    padding: inherit;
    text-align: inherit;
  
    // 可以滚动 且不显示滚动条
    &::-webkit-scrollbar {
      display: none;
    }
  }
  // textarea
  .el-textarea__inner {
    border: none;
    resize: none;
    color: #000;
    text-indent: inherit;
    text-align: inherit;
    font-size: inherit;
    padding: 0 8px;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .el-input-group__append {
    padding: 0;
    background-color: #fff;
    border: none;
  }

  .el-menu--vertical {
    background-color: pink!important;
  }
}